<template>
  <Layout class="layout-100">
    <Header class="header-cont">生成用户</Header>
    <Content>
      <Row>
        <Col span="24">
        <div>
          <Layout>
            <Header class="header-cont">通用角色</Header>
            <Content>
              <CheckboxGroup @on-change="changeNormalRoleList"  v-model="normalRoleIdList">
                <Checkbox v-for="item in normalRoleList" :true-value="item.id" :label="item.id" border>{{item.name}}</Checkbox>
              </CheckboxGroup>
            </Content>
          </Layout>
        </div>
        </Col>
        <Col span="24">
        <div>
          <Layout>
            <Header class="header-cont">专用角色</Header>
            <Content>
              <CheckboxGroup v-model="specialRoleIdList" @on-change="changeSpecialRoleList">
                <Checkbox v-for="item in specialRoleList" :label="item.id" border>{{item.name}}</Checkbox>
              </CheckboxGroup>
            </Content>
          </Layout>
        </div>
        </Col>
      </Row>
    </Content>

  </Layout>
</template>

<script>
  export default {
    name: 'CreateUser',
    data() {
      return {
        specialRoleList: [],
        normalRoleList: [],
        specialRoleIdList: [],
        changeNormalRoleList: [],

      }
    }
  }
</script>

<style scoped>

</style>